JavaScript Object.assign vs Spread: Perbandingan Kinerja dan Kasus Penggunaan

Dalam JavaScript, memanipulasi objek adalah tugas yang umum. Dua metode populer untuk mencapai hal ini adalah Object.assign() dan sintaks spread (...). Meskipun keduanya dapat digunakan untuk menyalin properti dari satu atau lebih objek ke objek target, keduanya berbeda dalam karakteristik kinerja, kasus penggunaan, dan perilaku keseluruhan. Artikel ini memberikan perbandingan komprehensif untuk membantu Anda memilih alat yang tepat untuk pekerjaan itu.

Memahami Object.assign()

Object.assign() adalah metode yang menyalin nilai dari semua properti sendiri yang dapat dihitung (enumerable) dari satu atau lebih objek sumber ke objek target. Ia mengembalikan objek target yang dimodifikasi.

Sintaks:

            Object.assign(target, ...sources)
            

              
                Copy
              
            
          

Contoh:

            const target = { a: 1 };
const source = { b: 2, c: 3 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 2, c: 3 }
console.log(returnedTarget === target); // true

            

              
                Copy
              
            
          

Dalam contoh ini, properti b dan c dari objek source disalin ke objek target. Object.assign() memodifikasi objek target asli dan mengembalikannya.

Memahami Sintaks Spread

Sintaks spread (...) memungkinkan iterable seperti array atau objek untuk diperluas di tempat-tempat di mana nol atau lebih argumen (untuk panggilan fungsi) atau elemen (untuk literal array) atau pasangan kunci-nilai (untuk literal objek) diharapkan.

Sintaks (Literal Objek):

            const newObject = { ...object1, ...object2 };
            

              
                Copy
              
            
          

Contoh:

            const obj1 = { a: 1 };
const obj2 = { b: 2, c: 3 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

            

              
                Copy
              
            
          

Di sini, sintaks spread membuat objek baru mergedObj dengan menggabungkan properti obj1 dan obj2.

Perbandingan Kinerja

Perbedaan kinerja antara Object.assign() dan sintaks spread dapat bervariasi tergantung pada mesin JavaScript dan kompleksitas objek yang dimanipulasi. Umumnya, untuk kloning dan penggabungan objek sederhana, sintaks spread cenderung sedikit lebih cepat. Namun, perbedaannya seringkali dapat diabaikan untuk objek kecil. Untuk objek yang lebih besar, skenario yang lebih kompleks, dan operasi berulang, disarankan untuk melakukan micro-benchmarking untuk menentukan pendekatan tercepat untuk kasus penggunaan spesifik Anda. Mari kita pertimbangkan skenario yang berbeda:

Skenario 1: Kloning Objek Sederhana

Saat mengkloning satu objek, sintaks spread umumnya menunjukkan kinerja yang lebih baik karena operasinya lebih efisien.

            const original = { a: 1, b: 2, c: 3 };

// Spread Syntax
const cloneSpread = { ...original };

// Object.assign()
const cloneAssign = Object.assign({}, original);

            

              
                Copy
              
            
          

Skenario 2: Menggabungkan Beberapa Objek

Saat menggabungkan beberapa objek, perbedaan kinerja antara kedua metode seringkali minimal, tetapi sintaks spread seringkali mempertahankan sedikit keunggulan, terutama karena diimplementasikan secara native di mesin JavaScript modern.

            const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// Spread Syntax
const mergedSpread = { ...obj1, ...obj2, ...obj3 };

// Object.assign()
const mergedAssign = Object.assign({}, obj1, obj2, obj3);

            

              
                Copy
              
            
          

Skenario 3: Objek Besar dengan Banyak Properti

Saat berhadapan dengan objek besar yang berisi ratusan atau ribuan properti, perbedaan kinerja dapat menjadi lebih terlihat. Dalam kasus ini, sintaks spread seringkali mempertahankan keunggulannya karena alokasi memori dan penyalinan properti yang lebih efisien di dalam mesin.

Benchmarking

Untuk mendapatkan pengukuran kinerja yang tepat, pertimbangkan untuk menggunakan alat benchmarking seperti Benchmark.js. Alat ini memungkinkan Anda menjalankan pengujian berulang dan mengumpulkan statistik untuk menentukan metode mana yang berkinerja terbaik dalam kondisi tertentu.

Contoh menggunakan Benchmark.js:

            const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// add tests
suite.add('Spread Syntax', function() {
  const mergedSpread = { ...obj1, ...obj2, ...obj3 };
})
.add('Object.assign()', function() {
  const mergedAssign = Object.assign({}, obj1, obj2, obj3);
})
// add listeners
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });

            

              
                Copy
              
            
          

Cuplikan kode ini menunjukkan cara mengatur benchmark kinerja menggunakan Benchmark.js untuk membandingkan kinerja sintaks spread dan Object.assign() saat menggabungkan beberapa objek. Ingatlah untuk menginstal pustaka menggunakan npm install benchmark sebelum menjalankan skrip.

Kasus Penggunaan

Meskipun kinerja adalah faktor penting, pilihan antara Object.assign() dan sintaks spread seringkali bergantung pada kasus penggunaan spesifik dan preferensi gaya pengkodean.

Object.assign() Kasus Penggunaan

• Memodifikasi Objek Target: Object.assign() memodifikasi objek target secara langsung, yang dapat berguna ketika Anda ingin memperbarui objek yang ada di tempat.
• Kompatibilitas dengan Browser Lama: Object.assign() memiliki dukungan browser yang lebih luas dibandingkan dengan sintaks spread, sehingga cocok untuk proyek yang menargetkan lingkungan yang lebih lama. Anda mungkin memerlukan polyfill untuk browser yang lebih lama.
• Berintegrasi dengan Basis Kode yang Ada: Jika Anda bekerja dengan basis kode yang ada yang secara ekstensif menggunakan Object.assign(), tetap menggunakannya dapat menjaga konsistensi dan mengurangi risiko memperkenalkan bug.
• Menetapkan Nilai Default: Ini dapat digunakan untuk menerapkan nilai default ke objek, memastikan bahwa properti tertentu selalu ditentukan.

              const defaults = { a: 1, b: 2, c: 3 };
  const options = { a: 10, d: 4 };
  
  const config = Object.assign({}, defaults, options);
  console.log(config); // { a: 10, b: 2, c: 3, d: 4 }
  
              
  
                
                  Copy
                
              
            

Spread Syntax Kasus Penggunaan

• Membuat Objek Baru: Sintaks spread unggul dalam membuat objek baru tanpa memodifikasi objek asli, mempromosikan immutabilitas.
• Sintaks Ringkas: Sintaks spread seringkali menghasilkan kode yang lebih mudah dibaca dan ringkas, terutama saat menggabungkan beberapa objek.
• React dan Redux: Dalam React dan Redux, di mana immutabilitas sangat penting untuk kinerja dan manajemen state, sintaks spread banyak digunakan untuk membuat versi objek state yang diperbarui.
• Pemrograman Fungsional: Ini selaras dengan prinsip-prinsip pemrograman fungsional, di mana menghindari efek samping dan bekerja dengan data immutable didorong.

Salinan Dangkal vs. Salinan Mendalam

Penting untuk memahami bahwa baik Object.assign() dan sintaks spread melakukan salinan dangkal. Ini berarti bahwa jika objek berisi objek bersarang, hanya referensi ke objek bersarang tersebut yang disalin, bukan objek bersarang itu sendiri. Memodifikasi objek bersarang dalam objek yang disalin juga akan memengaruhi objek asli, dan sebaliknya.

Contoh:

            const original = {
  a: 1,
  b: { c: 2 }
};

const copied = { ...original };

copied.b.c = 3;

console.log(original.b.c); // 3 - Objek asli dimodifikasi!

            

              
                Copy
              
            
          

Jika Anda perlu membuat salinan mendalam, di mana objek bersarang juga disalin, Anda dapat menggunakan teknik seperti:

• JSON.parse(JSON.stringify(object)): Ini adalah pendekatan yang sederhana tetapi berpotensi tidak efisien, terutama untuk objek yang besar atau kompleks. Ini juga tidak menangani fungsi atau referensi melingkar dengan benar.
• Menggunakan pustaka seperti _.cloneDeep() dari Lodash: Pustaka seperti Lodash menyediakan fungsi kloning mendalam yang dioptimalkan yang menangani berbagai kasus edge.
• Menulis fungsi salinan mendalam rekursif khusus: Ini memungkinkan Anda mengontrol proses kloning dan menangani jenis atau struktur data tertentu.

Immutabilitas

Immutabilitas adalah konsep pemrograman yang menekankan pembuatan struktur data baru alih-alih memodifikasi yang sudah ada. Pendekatan ini dapat menghasilkan kode yang lebih mudah diprediksi, debugging yang lebih mudah, dan peningkatan kinerja dalam skenario tertentu. Baik Object.assign() dan sintaks spread dapat digunakan untuk mempromosikan immutabilitas, tetapi sintaks spread umumnya lebih disukai karena kemampuannya untuk membuat objek baru secara lebih langsung.

Menggunakan Object.assign() untuk mencapai immutabilitas memerlukan pembuatan objek target baru terlebih dahulu:

            const original = { a: 1, b: 2 };
const updated = Object.assign({}, original, { a: 10 });

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

            const original = { a: 1, b: 2 };
const updated = { ...original, a: 10 };

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

Contoh Praktis

Contoh 1: Memperbarui Data Profil Pengguna

Bayangkan Anda memiliki objek profil pengguna dan Anda ingin memperbaruinya dengan informasi baru dari formulir. Menggunakan sintaks spread, Anda dapat dengan mudah membuat objek baru dengan data yang diperbarui:

            const userProfile = {
  id: 123,
  name: 'Alice',
  email: 'alice@example.com',
  location: 'New York'
};

const updatedData = {
  email: 'alice.new@example.com',
  location: 'London'
};

const updatedProfile = { ...userProfile, ...updatedData };

console.log(updatedProfile);
// {
//   id: 123,
//   name: 'Alice',
//   email: 'alice.new@example.com',
//   location: 'London'
// }

            

              
                Copy
              
            
          

Contoh 2: Mengelola Item Keranjang Belanja

Dalam aplikasi e-commerce, Anda mungkin perlu memperbarui kuantitas item dalam keranjang belanja. Menggunakan sintaks spread, Anda dapat membuat array keranjang baru dengan item yang diperbarui:

            const cart = [
  { id: 1, name: 'Product A', quantity: 2 },
  { id: 2, name: 'Product B', quantity: 1 }
];

const productIdToUpdate = 1;
const newQuantity = 3;

const updatedCart = cart.map(item =>
  item.id === productIdToUpdate ? { ...item, quantity: newQuantity } : item
);

console.log(updatedCart);
// [
//   { id: 1, name: 'Product A', quantity: 3 },
//   { id: 2, name: 'Product B', quantity: 1 }
// ]

            

              
                Copy
              
            
          

Contoh 3: Mengonfigurasi Pengaturan Aplikasi

Saat mengonfigurasi pengaturan aplikasi, Anda mungkin ingin menggabungkan pengaturan default dengan pengaturan yang disediakan pengguna. Object.assign() dapat berguna untuk tujuan ini, terutama jika Anda perlu memodifikasi objek pengaturan default secara langsung:

            const defaultSettings = {
  theme: 'light',
  fontSize: 'medium',
  language: 'en'
};

const userSettings = {
  theme: 'dark',
  fontSize: 'large'
};

Object.assign(defaultSettings, userSettings);

console.log(defaultSettings);
// {
//   theme: 'dark',
//   fontSize: 'large',
//   language: 'en'
// }

            

              
                Copy
              
            
          

Dalam kasus ini, defaultSettings dimodifikasi di tempat, yang mungkin atau mungkin tidak diinginkan tergantung pada persyaratan aplikasi Anda.

Praktik Terbaik

• Pahami Penyalinan Dangkal: Ketahui bahwa kedua metode melakukan penyalinan dangkal. Untuk penyalinan mendalam, gunakan teknik atau pustaka yang sesuai.
• Pertimbangkan Immutabilitas: Bila memungkinkan, pilih sintaks spread untuk membuat objek baru dan mempromosikan immutabilitas.
• Benchmark Saat Diperlukan: Untuk kode yang penting untuk kinerja, benchmark kedua metode untuk menentukan opsi tercepat untuk kasus penggunaan spesifik Anda.
• Pilih Berdasarkan Konteks: Pilih metode yang paling sesuai dengan gaya pengkodean Anda, persyaratan proyek, dan kebutuhan kompatibilitas.
• Gunakan Linter dan Panduan Gaya Kode: Terapkan penggunaan Object.assign() dan sintaks spread yang konsisten melalui linter dan panduan gaya kode.
• Dokumentasikan Pilihan Anda: Dokumentasikan dengan jelas alasan Anda memilih satu metode daripada metode lainnya, terutama dalam basis kode yang kompleks.

Kesimpulan

Object.assign() dan sintaks spread adalah alat yang berharga untuk manipulasi objek di JavaScript. Meskipun sintaks spread seringkali menawarkan kinerja yang sedikit lebih baik dan mempromosikan immutabilitas, Object.assign() tetap relevan untuk memodifikasi objek yang ada dan menjaga kompatibilitas dengan lingkungan yang lebih lama. Memahami nuansa setiap metode memungkinkan Anda membuat keputusan yang tepat dan menulis kode yang lebih efisien dan mudah dipelihara.

Dengan mempertimbangkan karakteristik kinerja, kasus penggunaan, dan praktik terbaik yang diuraikan dalam artikel ini, Anda dapat secara efektif memanfaatkan baik Object.assign() dan sintaks spread untuk meningkatkan alur kerja pengembangan JavaScript Anda dan membangun aplikasi yang kuat dan terukur untuk audiens global. Ingatlah untuk selalu memprioritaskan kejelasan dan pemeliharaan kode sambil mengoptimalkan kinerja bila perlu. Micro-benchmarking dan profiling kode Anda juga dapat membantu Anda mengidentifikasi kemacetan kinerja dan membuat keputusan berdasarkan data tentang metode mana yang akan digunakan dalam skenario tertentu.